<div class="l-wrapper" *ngIf="isNode">
    <div class="l-title" [matTooltip]="toAppData?.applicationName">
        <img *ngIf="toAppData" [src]="getIconPath(toAppData?.serviceType)" (error)="onLoadError($event.target)"> <span>{{toAppData?.applicationName}}</span>
    </div>
    <select *ngIf="showAgentList()" style="background-color: #FFF" #agent (change)="onChangeAgent(agent.value)">
        <option value="All">All Agent</option>
        <option *ngFor="let agentName of toAppData.agentList" value="{{agentName}}">{{agentName}}</option>
    </select>
</div>
<div class="l-wrapper-grid" *ngIf="!isNode">
    <div class="l-title" [matTooltip]="fromAppData?.applicationName">
        <img *ngIf="fromAppData" [src]="getIconPath(fromAppData?.serviceType)" (error)="onLoadError($event.target)"> <span>{{fromAppData?.applicationName}}</span>
    </div>
    <div><i class="fas fa-arrow-circle-right"></i></div>
    <div class="l-title" [matTooltip]="toAppData?.applicationName">
        <img *ngIf="toAppData" [src]="getIconPath(toAppData?.serviceType)" (error)="onLoadError($event.target)"> <span>{{toAppData?.applicationName}}</span>
    </div>
</div>